<template>
  <div>
    <el-table v-loading="loading" :data="orderList" >
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <!-- <el-table-column label="订单ID" align="center" prop="orderId" /> -->
      <el-table-column label="订单编号" align="center" prop="orderCode" width="150">
        <!-- <template slot-scope="scope">
          <router-link :to="'/mes/md/order/order-data/index/' + scope.row.orderId" class="link-type">
            <span>{{ scope.row.orderCode }}</span>
          </router-link> -->
        <!-- <el-link type="primary" :underline="false" @click="openView(scope.row)">{{scope.row.orderCode}}</el-link> -->
        <!-- </template> -->
      </el-table-column>
      <el-table-column label="订单类型" align="center" prop="orderType">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.mes_order_type" :value="scope.row.orderType" />
        </template>
      </el-table-column>
      <!-- <el-table-column label="客户ID" align="center" prop="clientId" /> -->
      <el-table-column label="客户编码" align="center" prop="clientCode" width="120" />
      <el-table-column label="客户名称" align="center" prop="clientName" width="120" />
      <el-table-column label="产品分类" align="center" prop="itemTypeId" width="120">
        <template slot-scope="scope">
          <span>{{itemTypeName(scope.row.itemTypeId)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单数量" align="center" prop="orderCount" width="120" />
      <el-table-column label="库存数量" align="center" prop="stockCount" width="120" />
      <el-table-column label="投产数量" align="center" prop="quantity" width="120" />
      <el-table-column label="订单状态" align="center" prop="status" width="120">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.mes_md_order_status" :value="scope.row.status" />
        </template>
      </el-table-column>
      <!-- <el-table-column label="产品ID" align="center" prop="productId" /> -->
      <el-table-column label="下单日期" align="center" prop="orderDate" width="150">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.orderDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="交货日期" align="center" prop="requestDate" width="150">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.requestDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>

      <el-table-column label="产品编号" align="center" prop="productCode" width="120" />
      <el-table-column label="产品名称" align="center" prop="productName" width="120" />
      <el-table-column label="评审类型" align="center" prop="reviewType" width="120">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.mes_review_type" :value="scope.row.reviewType" />
        </template>
      </el-table-column>
      <!-- <el-table-column label="工艺路线ID" align="center" prop="routeId" /> -->
      <!-- <el-table-column label="工艺路线编号" align="center" prop="routeCode" width="120" /> -->
      <!-- <el-table-column label="工艺路线名称" align="center" prop="routeName" width="120" /> -->
      <el-table-column label="投料点" align="center" prop="feedingPoint" width="120" />
      <el-table-column label="投料数量" align="center" prop="feedingCount" width="120" />
      <el-table-column label="订单用纸" align="center" prop="paperAmount" width="120" />
      <el-table-column label="允许溢短数" align="center" prop="gapCount" width="120" />
      <el-table-column label="稿件类型" align="center" prop="manuscriptType" width="120" />
      <el-table-column label="执行标准" align="center" prop="standard" width="120" />
      <!-- <el-table-column label="订单成本" align="center" prop="cost" /> -->
      <el-table-column label="价格" align="center" prop="price" width="120" />
      <el-table-column label="订单描述" align="center" prop="orderRemark" :show-overflow-tooltip="true" width="120" />
      <el-table-column label="业务备注" align="center" prop="businessRemark" :show-overflow-tooltip="true" width="120" />
      <el-table-column label="优先级" align="center" prop="priority" width="120" />
      <el-table-column label="箱子资料" align="center" prop="boxInfo" width="120" />
      <el-table-column label="开单人" align="center" prop="salesman" width="120" />
      <!-- <el-table-column label="预留字段1" align="center" prop="attr1" /> -->
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

  </div>
</template>

<script>
import { listOrder } from "@/api/mes/md/order";
import { listItemType } from "@/api/mes/md/itemtype";

export default {
  props: {
      productId: undefined
  },
  name: "busOrder",
  dicts: ['mes_md_order_status', 'mes_order_type', 'mes_review_type'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 业务订单表格数据
      orderList: [],
      // 物料分类列表数据
      itemTypeList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        productId: this.productId
      },
    }
  },
  watch: {
    productId(newVal, oldVal) {
      console.log(newVal, oldVal)
      this.queryParams.productId = newVal;
      this.getList();
    }
  },
  computed: {
    // 产品类别
    itemTypeName() {
      return function(id) {
        let list = this.itemTypeList.filter(item => item.itemTypeId == id)
        return list.length > 0 ? list[0].itemTypeName : "";
      }
    }
  },
  created() {
    this.getList();
    this.getItemTypeList();
  },
  methods: {
    /** 查询业务订单列表 */
    getList() {
      this.loading = true;
      if (this.queryParams.productId) {
        listOrder(this.queryParams).then(response => {
          this.orderList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      } else {
        this.loading = false;
      }
    },
    /** 查询物料分类列表 */
    getItemTypeList() {
      let param = {
        parentTypeId: 201
      }
      listItemType(param).then(response => {
        // var types = this.handleTree(response.data, "itemTypeId","parentTypeId");
        this.itemTypeList = response.data;
      });
    },
  }
}
</script>

<style>
</style>
